import { useRef } from 'react'
import { useInViewport } from 'ahooks'
import styles from './index.module.less'
import type { SwiperItemProps, TeacherReportData } from '../../interface'
import { percentToNum } from '@/utils/percentToNum'

interface Props extends SwiperItemProps, Pick<TeacherReportData, 'basic_student_module'> {}

export const SecondPage = (props?: Props) => {
    const data = props?.basic_student_module

    const isActive = props?.current === props?.itemIndex
    const ref = useRef<HTMLDivElement>(null)
    const [inViewport] = useInViewport(ref, {
        // 在Swiper下需要偏移才能才能正确获取`inViewport`状态
        rootMargin: '-5px',
    })
    if (!isActive && !inViewport) {
        return <div className={styles.page} />
    }

    return (
        <div className={styles.page} ref={ref}>
            <div className={styles.page_top}>
                <div className={styles.page_top_content}>
                    <p>2024</p>
                    <p>作为授课讲师的您</p>
                    <p>
                        共开展了<span>{data?.total_course_num || 0}</span>个创业培训项目
                    </p>
                    <p>
                        共授课了<span>{data?.total_group_num || 0}</span>个班级
                    </p>
                    <p>
                        共培训了<span>{data?.total_student_num || 0}</span>名学员
                    </p>
                </div>
            </div>

            <div className={styles.page_middle}>
                <div className={styles.page_middle_content}>
                    <p>在您的悉心栽培下</p>
                    <p>
                        共有<span>{data?.total_quality_student_num || 0}</span>名学员顺利通过考核
                    </p>
                    <p>
                        合格率<span>{data?.quality_percent || '0%'}</span>
                    </p>
                    <p>这一年里，</p>
                    <p>
                        {/* 您的授课时长为<span>{data?.teach_time || '-'}</span> */}
                        您的授课时长为<span>{data?.hour || 0}</span>小时
                        <span>{data?.minute || 0}</span>分
                    </p>
                    {percentToNum(data?.teach_percent) >= 80 && (
                        <p>
                            超过全国<span>{data?.teach_percent || '0%'}</span>的讲师
                        </p>
                    )}
                </div>
            </div>

            <div className={styles.page_bottom}>
                <div className={styles.page_bottom_content}>
                    <div className={styles.splitLine} />
                    <p>时间会铭记您培育的过程</p>
                    <p>成功道路上离不开您的辛苦付出</p>
                </div>
            </div>
        </div>
    )
}

export default SecondPage
